import { Button } from 'antd'
import Style from './nav.module.less'

const cards = [
  { title: 'WeiLan 官网', copy: 'It\'s the desert you\'ve always dreamed of', button: 'Book Now', url: 'https://www.weillan.com' },
  { title: 'WeiLan SAAS', copy: 'Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains', button: 'View Trips', url: 'https://wl-saas-test.weillan.com' },
  { title: 'WeiLan DEMO', copy: 'Plan your next beach trip with these fabulous destinations', button: 'View Trips', url: 'https://case-test.weillan.com/' },
  { title: 'WeiLan 云效', copy: 'Seriously, straight up, just blast off into outer space today', button: 'Book Now', url: 'https://devops.aliyun.com' },
  // { title: '南天门', copy: 'Seriously, straight up, just blast off into outer space today', button: 'Book Now', url: 'http://ntm-admin-devtest.weillan.com' }
]

const Nav = () => {
  return (
    <main className={Style["page-content"]}>
      {
        cards.map(({title, copy, button, url}) => (
          <div className={Style.card}>
            <div className={Style.content}>
              <h2 className={Style.title}>{title}</h2>
              <p className={Style.copy}>{copy}</p>
              <button className={Style.btn} onClick={() => {window.open(url)}}>{button}</button>
            </div>
          </div>
        ))
      }
    </main>
  )
}
export default Nav
